<!DOCTYPE html>

<html>
<head>
    <title>title</title>
    <!-- pace -->
    <script src="/plugins/pace-0.7.5/pace.js"></script>
    <link href="/plugins/pace-0.7.5/themes/black/pace-theme-center-circle.css" rel="stylesheet" />
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <!-- Font Awesome -->
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
        <!-- Ionicons -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="/css/AdminLTE.min.css">
    <link rel="stylesheet" href="/plugins/animate/animate.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="/css/skins/my_all-skins.css">
    <!-- MyAdminLTE.css -->
    <link rel="stylesheet" href="/css/MyAdminLTE.css">
    <!-- Lobibox -->
    <link rel="stylesheet" href="/plugins/lobibox/css/lobibox.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
<!--    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>-->
    <![endif]-->
</head>
<body class="hold-transition skin-blue sidebar-mini fixed">
<#include "left.ftl">
<div class="content-wrapper">
    <section class="content" id="app">
        <div class="col-md-5" style="padding: 0">
            <div class="box box-primary">
                <div class="box-body">
                    <form id="addForm" method="post" >
                        <h3 style="padding-top:20px;"><strong>添加选手</strong></h3>
                        <div class="form-group">
                            <div class="form-group">
                                <label class="form-inline">姓名</label>
                                <input class="form-control" placeholder="" id="singname" name="singname" autocomplete="off" >
                            </div>
                            <div class="form-group">
                                <label class="form-inline">状态</label>
                                <select class="form-control" id="singtype" name="singtype">
                                    <option value="1">开启</option>
                                    <option value="0">关闭</option>
                                </select>
                            </div>


                            <div class="box-footer clearfix">
                                <button class="btn btn-success pull-right" onclick="addSubmit()">添加</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!--right-->
        <div class="col-md-7">
            <div class="box box-primary">
                <table class="table table-hover">
                    <tr>
                        <td>选手编号</td>
                        <td>选手姓名</td>
                        <td>选手状态</td>
                        <td>操作1</td>
                        <td>操作2</td>
                    </tr>
                    <tr v-for="el in sings" :id="el.id">
                        <td>{{el.id}}</td>
                        <td>{{el.singname}}</td>
                        <td ><span v-if="el.singtype==0">关闭</span><span v-if="el.singtype==1">开启</span></td>
                        <td >
                            <span v-if="el.singtype==0"> <button v-on:click="editSingOpen(el)">开启</button></span>
                            <span v-if="el.singtype==1"> <button v-on:click="Singshutdown(el)">关闭</button></span>
                        </td>
                        <td>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </section>
</div>




<!-- jQuery 2.2.3 -->
<script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/js/bootstrap.js">
<!--vue-->
<script src="/plugins/vue/vue.js"></script>
<!-- SlimScroll -->
<script src="/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="/plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="/js/app.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="/js/demo.js"></script>
<script src="/plugins/echarts/echarts.min.js"></script>
<script src="/plugins/lobibox/js/lobibox.min.js"></script>
<script src="/js/common.js"></script>
<script src="/plugins/Flat/dist/js/flat-ui.js"></script>
<script>
    $(function() {
        getAllsing();
    });
    var vm = new Vue({
        el:"#app",
        data:{
            sings:{}
        },
        methods:{
            getAllsing:function () {
                getAllsing();
            },
            editSingOpen:function (singsInfo) {
                SingOpen(singsInfo);
            },
            Singshutdown:function (singsInfo) {
               Singshutdown(singsInfo);
            }
        }
    });

    function  getAllsing() {
        $.post("/sing/allSing", function(result){
            result=eval(result);
            vm.sings = result;
        });

    }
    function errorFn() {
        alert("失败");
    }
    //添加选手方法
    function addSubmit(){
       // alert(JSON.stringify($("#addForm").serialize()));

        ajaxSubmitForm("/sing/addSings",$("#addForm").serialize(),success,errorFn);
        function success(data){
            getAllTag(0);
            alert("1");
        }

    }

    /*开启选手方法*/
    function SingOpen(singsInfo) {

            if (confirm("是否要开启此选手?") == false) {
                return;
            }

            ajaxSubmit("/sing/updateSingOpen",JSON.stringify(singsInfo),sucess1,errorFn);
            function sucess1(data){
                getAllsing();
                alert("成功");
            }



    }
    //关闭选手方法
    function Singshutdown(id) {

            if (confirm("是否要关闭此选手?") == false) {
                return;
            }
            ajaxSubmit("/sing/updateSingShutdoun",JSON.stringify(id),sucess1,errorFn);
            function sucess1(data){
                getAllsing();
                alert("成功");
            }


    }

</script>
</body>
</html>
